<template>
    <page-view>

        <el-card>
            <template #header>
                <div class="font-bold">菜品列表</div>
            </template>
            <el-form :model="queryFormData" :inline="true">
                <el-form-item label="菜品名称">
                    <el-input placeholder="请输入菜品名称" v-model="queryFormData.food_name" />
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input placeholder="请输入分类名称" v-model="queryFormData.category_name" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData" :loading="isLoading">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                    <el-button @click="$router.push({ name: 'AddFoodInfo' })" type="success">新增菜品</el-button>
                </el-form-item>
            </el-form>

            <!-- 数据展示 -->
            <div v-loading="isLoading">
                <el-table :data="resultData.listData" border stripe height="800">
                    <el-table-column label="id" prop="id" width="70" align="center"></el-table-column>
                    <el-table-column label="菜品名称" width="240" prop="food_name" align="center"></el-table-column>
                    <el-table-column label="菜品分类" width="180" prop="categoryInfo.category_name" align="center">
                    </el-table-column>
                    <el-table-column label="价格" width="180" prop="price" align="center"></el-table-column>
                    <el-table-column label="销售数量" width="150" prop="saleCount" align="center"></el-table-column>
                    <el-table-column label="菜品图片" prop="food_img" width="200" align="center">
                        <template #default="{ row }">
                            <el-image :src="baseURL + row.food_img" alt="" class="w-[50px] h-[50px]" fit="cover"
                                :preview-src-list="[baseURL + row.food_img]" :preview-teleported="true" />
                        </template>
                    </el-table-column>
                    <el-table-column label="菜品简述" width="270" align="center">

                        <template #default="{ row, column, $index }">
                            <el-popover placement="top-start" title="菜品简述" width="240" trigger="hover"
                                :content="row.food_desc">
                                <template #reference>
                                    <el-link undeline>
                                        {{ textEllipsis(row.food_desc) }}
                                    </el-link>
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="菜品权重" prop="weight" align="center">
                        <template #default="{ row }">
                            <div class="flex felx-row justify-center items-center">
                                <el-slider v-model="row.weight" :min="0" :max="100" :step="0.1"
                                    @change="val => weightChange(val, row.id)" />

                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">

                        <template #default="{row}">

                            <el-button type="warning" @click="$router.push({name:'EditFoodInfo',params:{id:row.id}})" :loading="isLoading">
                                <el-icon>
                                    <Edit />
                                </el-icon>
                                编辑
                            </el-button>
                            <el-popconfirm title="你确定要删除吗" @confirm="delteCurrentItem(row.id)">
                                <template #reference>
                                    <el-button type="danger" :loading="isLoading">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                        删除
                                    </el-button>

                                </template>

                            </el-popconfirm>
                        </template>

                    </el-table-column>

                </el-table>
                <!-- 页码 -->

                <div class="flex flex-row justify-between items-center mt-10">

                    <div>当前{{ queryFormData.pageIndex }}页，
                        共{{ resultData.pageCount }}页，共{{ resultData.totalCount }}条
                    </div>
                    <el-pagination background layout="prev,pager,next" :total="resultData.totalCount"
                        @current-change="currentChange"></el-pagination>
                </div>
            </div>


        </el-card>
    </page-view>

</template>


<script setup>
import { reactive, inject, ref } from "vue";
import { Search, Delete, Edit } from "@element-plus/icons-vue"
import API from "../../utils/API";
import { textEllipsis } from "@/utils/StringUtils";
import { onMounted, } from "vue";
import { ElNotification } from "element-plus";
const baseURL = inject("baseURL");

const queryFormData = reactive({
    food_name: "",
    pageIndex: 1,
    category_name: ""
})
const isLoading = ref(false);
const resultData = reactive({
    listData: [],
    pageCount: 0,
    totalCount: 0

})
const queryData = () => {
    isLoading.value = true;
    API.foodInfo.getListByPage(queryFormData).then(result => {
        console.log(result);
        resultData.listData = result.listData;
        resultData.pageCount = result.pageCount;
        resultData.totalCount = result.totalCount;

    }).finally(() => {
        isLoading.value = false
    })
}
//页码发生变化
const currentChange = (index) => {
    queryFormData.pageIndex = index;
    queryData();
}


const weightChange = (value, id) => {
    console.log(value, id);
    API.foodInfo.setFoodInfoWeight({ id, weight: value })
}
//删除
const delteCurrentItem = (id) => {
    API.foodInfo.deleteById(id).then(result=>{
        ElNotification({
            type: "seccess",
            title: "删除成功",
            message: "当前菜品删除成功"
        });
        queryData();
    }).cathch(error=>{
        ElNotification({
            type: "danger",
            title: "删除失败",
            message: "当前菜品删除失败,请重试或联系管理员"
        });
    })
};

onMounted(() => {
    queryData()
})

</script>


<style>

</style>